<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式操作</title>
		<!-- 元素样式操作：直接操作元素的样式下的属性和属性值
		   css（）        功能---
		                  1个参：传入css属性名
						  功能：获取匹配元素集合中第一个元素的css属性值
						  2个参：传入css属性名和属性值
						  功能：获取匹配元素集合中所有元素的css属性值
						  n个参：传入多个css属性名和属性值
						  语法糖：css({"属性名":"属性值",
						              "属性名":"属性值",
									  ......
									  "属性名":"属性值"
									  })
		   width（）和height（） 功能：匹配元素集合中第一个元素宽高度
		                        无参:获取匹配元素集合中第一个元素宽高度
								有参：设置匹配元素集合中第一个元素宽高度
								 width(数值) 
		   outerWidth（）和outerHeight（）
		   出现原因：元素存在盒子中，盒子模型，宽度计算方式：内外边距+边框+内容
		   无参：获取元素宽高度，计算盒子模型：内边距+边框
		   有参：传入bool值，true时，计算盒子模型：内外边距+边框-->
		   <script src="../js/jquery-1.11.1.js"></script>
		   <style>
		   	.box{
		   		background-color: aqua;
		   		padding: 20px;
		   		margin: 20px;
		   		border: 5px solid red;
		   	}
		   	.result{
		   		margin-top: 10px;
		   		font-weight: bold;
		   	}
		   </style>
		  
		  </head>
	<body>
		<!-- 创建两个div平行 6个按钮 -->
		<!-- css：.box添加样式：背景颜色，内外边距：20px 边框5px 
		          .result添加样式：上外边距：10px，字体加粗
			引入jq框架	   -->
		<!-- 1.显示效果·区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorbtn">获取颜色属性值</button>
		<button id="setColorbtn">设置颜色效果</button>
		<button id="setBtn">设置多属性效果</button>
		<button id="gsBtn">获取元素宽度/设置元素宽度</button>
		<button id="bpBtn">获取高度(内边距+边框)</button>
		<button id="bpmbtn">获取高度(内外边距+边框)</button>
		<!-- 2.结果提示功能区域 -->
		<div class="result" id="result"></div>
		<script>
			/* 1.点击  获取颜色属性值 按钮 获取颜色值并打印页面上*/
			$("#getColorbtn").click(function(){
				var bgColor=$(".box").css("background-color");
				//页面上打印属性值？？？
				$("#result").text("获取属性值是："+bgColor)
			});
			/* 2.点击 设置颜色效果 */
			$("#setColorbtn").click(function(){
				$(".box").css("background-color","orange");
				$("#result").text("改变后的颜色为：橙色");
			});
			/* 3.点击 设置多属性效果 按钮  圆、背景色、阴影 */
			$("#setBtn").click(function(){
				$(".box").css({"background-image":"url(../蜡笔小新_爱给网_aigei_com.gif)",
					           "background-color":"#f00",
				               "border":"5px solid #ff0",
							   "width":"300px",
							   "height":"300px",
							   "background-size":"100% 100%",
							   "border-radius":"50%",
							   })
			});
		    /* 4.点击  获取、设置宽度 */
			$("#gsBtn").click(function(){
				var w=$(".box").width();
				$("#result").text("获取宽度是："+w+"px");
			});
		    /* 5.点击 获取高度 按钮  计算box空间高度*/
			$("#bpBtn").click(function(){
				var bp=$(".box").outerHeight();
				$("#result").text("获取高度为"+bp+"px")
			});
		    /* 6.*/
			$("#bpmbtn").click(function(){
				var bp=$(".box").outerHeight(true);
				$("#result").text("获取高度为"+bp+"px")
			});
		</script>
		
	</body>
</html>